<template>
    <div class="main">
        <div>
            <Echars3 v-if="echarsData.data" :data="echarsData.data.cursurplus" :key="key"></Echars3>
            <Echars1 v-if="echarsData.data" :data="echarsData.data.yesterdayChart" :key="key"></Echars1>
        </div>
        <Echars2 v-if="echarsData.data" :data="echarsData.data.weekChart" :key="key"></Echars2>
    </div>
</template>

<script setup lang="ts">
import { ECharts, EChartsOption, init } from 'echarts';
import { onMounted, reactive ,ref} from 'vue';
import { infomationcenterDrugsReq } from '@/API/bigData.api'
import Echars1 from './components/Census/Echars1.vue';
import Echars2 from './components/Census/Echars2.vue';
import Echars3 from './components/Census/Echars3.vue';

const echarsData = reactive({
    data:null
})
const key = ref(0)
// 请求后端数据
const getData = async () => {
    let res = await infomationcenterDrugsReq()
    console.log(res.data);
    echarsData.data=res.data
}

onMounted(async () => {
    await getData()
})

</script>

<style scoped lang="scss">
.main {
    display: flex;
    justify-content: space-between;
}

.main_box {
    width: 700px;
    height: 650px;
    border: 1px solid #ccc;
}

.main2_box {
    width: 850px;
    height: 650px;
    border: 1px solid #ccc;
}
</style>